<template>
  <div class="cart">
    <label>
      <input type="checkbox" v-model="checkAll" />
      全选
    </label>
    <ul>
      <li v-for="p in people" :key="p.id">
        <label>
          <input @change="pCLick" type="checkbox" v-model="p.checked" />
          {{p.name}}
        </label>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      people: [
        {
          id: 1,
          name: "田不易",
          checked: false
        },
        {
          id: 2,
          name: "田灵儿",
          checked: false
        },
        {
          id: 3,
          name: "大黄",
          checked: false
        },
        {
          id: 4,
          name: "小白",
          checked: true
        }
      ]
    };
  },
  computed: {
    checkAll: {
      set(v) {
        this.people.forEach(p => (p.checked = v));
        this.$eventBus.$emit("pc", this.people.filter(p => p.checked).length);
      },
      get() {
        return this.people.filter(p => p.checked).length === this.people.length;
      }
    }
  },
  watch: {},
  methods: {
    pCLick() {
      this.$eventBus.$emit("pc", this.people.filter(p => p.checked).length);
    }
  }
};
</script>
<style scoped>
/* scoped 表示样式只在当前组件内部有效 */
.cart {
  background-color: orangered;
  padding: 2rem;
  color: white;
}
</style>